//服务机构数
<template>
  <div class="Apply_bj">
    <div class="flexC">
      <div class="flex">
        <ul class="Inv_ul flex AlignItemsC colorF font_s30">
          <li @click="categoryFun(1)" :class="{ category: category === 1 }" class="flexC JustifyContentFE flex2 textC cursor"><p>住养服务机构</p></li>
          <li @click="categoryFun(2)" :class="{ category: category === 2 }" class="flex2 textC cursor"><p>居家服务机构</p></li>
        </ul>
      </div>
      <div class="flexC" style="padding: 0 4rem;">
        <ul class="Inv_ula flex AlignItemsC JustifyContentC colorF font_s22 textC">
          <li class="flex1">序号</li>
          <li class="flex3 textC">机构名称</li>
          <li class="flex2 textC">所属街镇</li>
          <li class="flex3 textC">机构地址</li>
          <li class="flex2 textC">法人</li>
          <li class="flex2 textC">联系人</li>
          <li class="flex2 textC">联系电话</li>
        </ul>
        <div style="height: 54vh;" class="superviseList font_s20" v-show="category === 1">
          <ul v-for="(item, index) in dataList" class="Inv_ulb flex colorF Bold textC" :key="item.fwjgid">
            <li class="flex1">{{ index + 1 }}</li>
            <li class="flex3">{{ item.jgmc }}</li>
            <li class="flex2">{{ item.jdMc }}</li>
            <li class="flex3">{{ item.jgdz }}</li>
            <li class="flex2">{{ item.fddbr }}</li>
            <li class="flex2">{{ item.lxr }}</li>
            <li class="flex2">{{ item.lxrdh }}</li>
          </ul>
        </div>
        <div style="height: 54vh;" class="superviseList font_s20" v-show="category === 2">
          <ul v-for="(item, index) in dataList2" class="Inv_ulb flex colorF Bold textC" :key="item.fwjgid">
            <li class="flex1">{{ index + 1 }}</li>
            <li class="flex3">{{ item.jgmc }}</li>
            <li class="flex2">{{ item.jdMc }}</li>
            <li class="flex3">{{ item.jgdz }}</li>
            <li class="flex2">{{ item.fddbr }}</li>
            <li class="flex2">{{ item.lxr }}</li>
            <li class="flex2">{{ item.lxrdh }}</li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 条件查询没有符合条件的数据时显示提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showErrorMessage">
      <p>没有符合条件的数据</p>
    </div>
    <!-- 数据加载中的提示信息 -->
    <div class="messageBoxStyle FontWeightB font_s28" v-show="showWaitingMessage">
      <p>数据加载中，请等待...</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      category: 1,
      dataList: [],
      dataList2: [],
      jglbValue: 1,
      // 无符合筛选条件显示内容
      showErrorMessage: false,
      showWaitingMessage: false
    }
  },
  mounted () {
    this.handle()
  },
  methods: {
    handle () {
      // 将存放请求接口数据的数组清空
      this.dataList = []
      this.dataList2 = []
      // 显示等待信息
      this.showWaitingMessage = true
      // 使用post方法请求数据
      this.$http.post(this.$api.FwjgList.fwjgList, 'jglb=' + this.jglbValue, true).then(result => {
        if (this.jglbValue === 1) {
          this.dataList = result.data.result
          // 判断请求到的数据是否为空
          if (this.dataList.length === 0) {
            this.showErrorMessage = true
            this.showWaitingMessage = false
          } else {
            this.showWaitingMessage = false
          }
        } else {
          this.dataList2 = result.data.result
          // 判断请求到的数据是否为空
          if (this.dataList2.length === 0) {
            this.showErrorMessage = true
            this.showWaitingMessage = false
          } else {
            this.showWaitingMessage = false
          }
        }
      })
    },
    categoryFun (index) {
      this.category = index
      if (index === 1) {
        this.jglbValue = 1
        this.handle()
      } else if (index === 2) {
        this.jglbValue = 6
        this.handle()
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.Apply_bj {
  width: 100%;
  height: 100%;
  .Inv_ul {
    width: 89.375rem;
    margin: 0.875rem auto 0.825rem;
    color: rgba($color: #04a5ff, $alpha: 0.8);
    font-weight: bold;
  }
  .Inv_ula {
    width: 100%;
    font-weight: bold;
    border: 1px solid rgba(0, 255, 255, 1);
    padding: 0.625rem 0;
    box-sizing: border-box;
  }
  .Inv_ulb {
    font-weight: bold;
    width: 100%;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.625rem 0;
      word-break: break-all;
    }
  }
  .superviseList {
    overflow-x: hidden;
    overflow-y: auto;
  }
  .superviseList::-webkit-scrollbar {
    width: 6px;
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 0.6);
  }
  .superviseList::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba($color: #fff, $alpha: 1);
  }
  .Inv_ulb:nth-child(even) {
    background: rgba(0, 255, 255, 0.1);
  }
  .category {
    color: #30dfff;
  }
}
</style>
